<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="{{url_for("mmturkey")}}?nowarn"></script>
</head>
<style type="text/css">
.text_container {
   margin-right: 140px;
}
#inputWord {
   width: 150px;
   margin-right: -130px;
}
.overlay {
    opacity: 0.3;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    padding-top: 100px;
    padding-left: 200px;
  }
  .overlay-message {
    z-index: 20;
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: #800;
    color: #fff;
    padding: 5px;
    opacity: 0.8;
  }
</style>

{% if is_preview %}
<div class="overlay"></div>
<div class="overlay-message">PREVIEW MODE - CLICK "ACCEPT" ABOVE TO START THIS
HIT</div>
{% endif %}

<!--
<h1>The Word-Guess Experiment</h1>

<hr>
-->

<p>Note: By completing this HIT you are giving your consent to participate
in a  research study by Professor Roger Levy of the University of
California at San Diego.&nbsp; Please take a moment to <a
href="{{url_for("static", filename="consent.html")}}"
target="_blank">read about giving informed  consent for this
study</a>. You can contact <a
href="mailto:nathaniel.smith@ed.ac.uk">nathaniel.smith@ed.ac.uk</a> or
<a href="mailto:rlevy@ucsd.edu">rlevy@ucsd.edu</a> with any questions
or concerns about this HIT.</p>

<hr>
<h2>Instructions:</h2>
In this task, we've selected a short story or magazine article
published in America in the 1960s, and your job is to read the text
and make guesses about what word is coming up next. For example, if
you read: <br>
<br>
   &nbsp;&nbsp;&nbsp;The children came [____] <br>
<br>
Then you might guess the next word is "inside", or "along", or any
number of things. Type your guess into the box, and then press Enter.
Then we'll show you what word was actually there, and give you a
chance to guess another word.<br>
<br>
Sometimes it may be very difficult to guess what word comes next. Don't worry!
This is normal, and you won't be penalized for guessing wrong -- but try to do
the best you can! If you're not sure, then try to say something that at least
makes sense in context.
<hr>
<i>This article is called...</i>
<h2>{{text_title}}</h2>

<script  language=javascript>  
<!-- Initialize Variables -->
var submit_url = "{{url_for("FillFirstForm")}}";
var disappear_url = "{{url_for("disappear")}}";
var startWord = {{start}};
var wordGap = {{gap}};
var div_index = 1;

var temp_sentence = "";
var display_text = [];
var display_text_index = 0;

var text_array = [];
var input_word_index = 0;

var array_index = 0;
var language = "";
var dialect = "";
var other_language = "";
var age;
var input_word = [];
var event_log = [];
var data = {};
data["input_word"] = []
</script>

<script  language=javascript>  
function check(event)
{
    var word_number2 = (input_word_index*wordGap) + startWord + input_word_index;
    log("keydown", text_array[word_number2].number, event.which);

    if(event.keyCode == 13 && document.getElementById("inputWord").value != "" && document.getElementById("inputWord").value != null){
	   var word = document.getElementById("inputWord").value;
           var word_number = (input_word_index*wordGap) + startWord + input_word_index;
           input_word_index++;
	   data["input_word"].push( [ text_array[word_number].number,word] ); 
           //data["input_word"][array_index] = [ text_array[word_number].number,word];

	   array_index++;
	   $("#main_text").append( display_text[array_index] );
	   document.getElementById("inputWord").value = "";

           var input_textfield = document.getElementById("hr1");
           input_textfield.scrollIntoView(false);
	   
	   if(array_index + 2> display_text.length){
		   document.getElementById("input_text").style.display = "none";
                   document.getElementById("user_display").style.display = "inline";

                   form = document.forms['FirstForm'];
                   form.elements['main_data'].value = JSON.stringify(data); 

                   document.getElementById("hr2").scrollIntoView(false);
	   }
	}
}  

function check_info()
{
        $("input").prop("disabled", true);

        form = document.forms['FirstForm'];

        data["language"] = form.elements['language'].value;
        data["dialect"] = form.elements['dialect'].value;
        data["other_language"] = form.elements['other_language'].value;
        data["age"] = form.elements['age'].value;
        data["comments"] = form.elements['comments'].value;

        log("submit");

        form.elements['main_data'].value = JSON.stringify(data); 

        window.onbeforeunload = undefined;

        $.post(submit_url, {"result": JSON.stringify(data),
                            "worker_id": '{{worker_id}}',
                            "text_index": '{{select_text_index}}',
                            "start_position": '{{start}}',
                            "gap": '{{gap}}',
                            "hit_id": '{{hit_id}}'})
                  .always(function() {
                     turk.submit(data);
                  });
        //form.submit();
}

    data["event_log"] = []
    //Let's just log everything, because it's a lot easier to throw away
    //useless data than it is to re-run the experiment... 
function log() {
      //Stolen from
      //   https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments
      var args = Array.prototype.slice.call(arguments);
      args.unshift(new Date().toISOString());
      console.log(args);
      data["event_log"].push(args);
  }

$(document).ready(function(){
    log("start");

    $("#inputWord").on("keydown", check);

    //Load text to array
    var the_index = 0;
    {% for i in range (0, textlen): %}
        {% for j in range (0, paraglen[i]): %}
           text_array[the_index] = { "number" : '{{text[i][j][0]}}', "word": '{{text[i][j][1]}}' };
           the_index++;
	   //$("#main_text").append( text_array[the_index].number);
        {% endfor %}
        text_array[the_index-1].word = text_array[the_index-1].word + "<br> <br>";
    {% endfor %}

     var guess_word_index = startWord;
    for(var i = 0; i < text_array.length; i++){
        if(i == guess_word_index){
		guess_word_index = guess_word_index + wordGap + 1;
					
		display_text[display_text_index] = temp_sentence;
		display_text_index++;
				
		temp_sentence = "<u>" + text_array[i].word + "</u>" + " ";
	}
	else{
		temp_sentence = temp_sentence +  text_array[i].word + " ";
	}
    }
    display_text[display_text_index] = temp_sentence;
	
	$("#main_text").append( display_text[0]);

	if (!turk.previewMode) {
	   window.onbeforeunload = function() {
                log("unload");
                $.ajax(disappear_url,
                       {"async": false,
                        "type": "POST",
                        "data":{    "result": JSON.stringify(data),
                            "worker_id": '{{worker_id}}',
                            "text_index": '{{select_text_index}}',
                            "start_position": '{{start}}',
                            "gap": '{{gap}}',
                            "hit_id": '{{hit_id}}',}
                        });
            };
        }
});
</script> 

<form action="" method="post" name="FirstForm">
    {{form.hidden_tag()}}
	
    <p class="text_container">
    <span id="main_text"></span>
    
    <span id="input_text">
    	<!--<input type="text" id="inputWord" onkeydown="check()">-->
        <input type="text" id="inputWord">
    </span>
    </p>

    <!--input id="Button1" type="button"  value="Check" onclick="check()" /-->
    <hr id="hr1">
    <div id="user_display" style="display:none">
      That's the end. We have some questions (optional, but appreciated!):
        <p>
         What is your native language or languages?
	 <input type="text" id="language">
        </p>
	<p>
         What dialect of English do you speak? (E.g., New York, Midwest, Scottish, Indian, ...)
	 <input type="text" id="dialect">
        </p>
	<p>
	  What other languages do you speak?
	  <input type="text" id="other_language">
	</p>
	<p>
	  How old are you?
	  <input type="text" id="age">
	</p>
        <p>
          Any other comments on this HIT?
        </p>
        <textarea rows="5" cols="50" id="comments"></textarea>
    <p><input type= button  value="Submit!" onclick="check_info()"></p>
    
    <hr id="hr2">
    </div>
    <div id="words_display" style="display:none">
        {{form.worker_id}}
        {{form.main_data}}
	{{form.text_index}}
	{{form.start_position}}
	{{form.gap}}
	{{form.hit_id}}
    </div>
</form>
